<style lang="less" scoped="scoped">
	.head{
		height: 1.52rem;
		background: black;
		position: relative;
		
	}
	img{
		width: .9rem;
		height: .9rem;
		border-radius: 50%;
		vertical-align: middle;
		float: left;
	}
	.clearfix{
			width: 3.25rem;
			height: .9rem;
			position: absolute;
			top: .83rem;
			left: .32rem;
		}
	.p{
		float: left;
		padding-top: .12rem;
		margin-left: .24rem;
		color: white;
	}
	.clearfix:after{
		display: block;
		content: '';
		clear: both;
		overflow: hidden;
	}
	.p>p{
		padding: .03rem 0;
	}
	.out{
		color: red;
	}
	.order,.nopay,.mall,.money,.balance,.card,.set{
		display: flex;
		height: .6rem;
		justify-content: space-between;
		align-items: center;

		margin: .15rem 0;
		padding: 0 .1rem;
		background: white;
	}
	
	.money,.balance,.card{
		border-bottom: .01rem solid lightgray;

		margin: 0;
	}
	.card{
		border-bottom: none;
	}
</style>


<template>
	<div id="">
		<p class="head">
			<div class="clearfix">
				<img src="https://static.m.maizuo.com/v4/static/app/asset/ca426920db24a84a0d98107f5fedc2cc.jpg"  />
				<div class="p">
					<p class="user">{{obj.name}}</p>
					<p class="id">{{obj.id}}</p>
					<p class="out" @click="quit">退出</p>
				</div>
			</div>
		</p>
		<div class="order">
			<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_833236_hb7sdu5yuwp.css"/>
			<div class="left_order">
				<i class="iconfont icon-ticket2"></i>
				<span>影票订单</span>
			</div>
			<div class="right_order">
				<span>{{obj.orderCount}}张</span>
				<i class="iconfont icon-aui-icon-right"></i>
			</div>
		</div>
		<div class="nopay">
			<div class="left_nopay">
				<i class="iconfont icon-shalou"></i>
				<span>影票待付订单</span>
			</div>
			<div class="right_nopay">
				<span>{{obj.preorderCount}}张</span>
				<i class="iconfont icon-aui-icon-right"></i>
			</div>
		</div>
		<div class="mall">
			<div class="left_mall">
				<i class="iconfont icon-shangcheng"></i>
				<span>商城订单</span>
			</div>
			<div class="right_mall">

				<i class="iconfont icon-aui-icon-right"></i>
			</div>
		</div>
		<div class="money">
			<div class="left_money">
				<i class="iconfont icon-xianjinquan"></i>
				<span>我的现金券</span>
			</div>
			<div class="right_money">
				<span>{{obj.wallet && obj.wallet.couponCount}}张</span>
				<i class="iconfont icon-aui-icon-right"></i>
			</div>
		</div>
		<div class="balance">
			<div class="left_balance">
				<i class="iconfont icon-yue"></i>
				<span>账户余额</span>
			</div>
			<div class="right_balance">
				<span>{{obj.wallet && obj.wallet.coin}}元</span>
				<i class="iconfont icon-aui-icon-right"></i>
			</div>
		</div>
		<div class="card">
			<div class="left_card">
				<i class="iconfont icon-qiapian"></i>
				<span>我的卖座卡</span>
			</div>
			<div class="right_card">
				<span>{{obj.wallet && obj.wallet.cardCount}}张</span>
				<i class="iconfont icon-aui-icon-right"></i>
			</div>
		</div>
		<div class="set">
			<div class="left_set">
				<i class="iconfont icon-shezhi"></i>
				<span>设置</span>
			</div>
			<div class="right_set">

				<i class="iconfont icon-aui-icon-right"></i>
			</div>
		</div>
	</div>
</template>



<script>
	
	import { ajax } from '@/utils'
	import { mapGetters } from 'vuex'
	export default{
		data(){
			return{
				obj:{},
			}
		},
		
		created(){
			this.personalCenter()
			if(!this.isLogin){
//				debugger
				this.$router.push({
					path:'/'
				})
			}
			
		},
		
		computed:{
			...mapGetters(['isLogin']),
			
			
		},
		
		
		methods:{
			// 退出操作
			quit(){
				
				let url1='https://www.easy-mock.com/mock/5b9624bfe0d1a17c279c8716/films/logout'
				let data = {};
				ajax(url1,data,(res1)=>{
				    this.$store.commit('isLogin',false)
					console.log(res1)
					this.$router.push({path: './SignIn'})
				})
			},
			
			// 个人中心渲染
			personalCenter(){
				let url2 = 'https://www.easy-mock.com/mock/5b9624bfe0d1a17c279c8716/films/me';
				let data ={};
				ajax(url2,data,(res2)=>{
					console.log(res2);
					this.obj = res2.user;
					
				})
			}
			
		}
	}
</script>

